<template>
  <div>
    <button @click="goMusic">跳转到音乐</button>
    <button @click="testParams">测试编程导航传参数</button>
    <hr>
    <router-view class="h"
                 name="header"></router-view>
    <router-view></router-view>
    <router-view class="f"
                 name="footer"></router-view>

  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  components: {

  },
  methods: {
    goMusic () {
      this.$router.push('/music');
    },
    testParams () {
      // 查询字符串的方式   /music?id=1&name=2
      this.$router.push({
        name: 'music',
        query: { id: 1, name: 2 }
      })
    }

  },
  created () {

  },
  mounted () {

  }
}
</script>

<style scoped>
.h {
  height: 100px;
  background-color: red;
}
.f {
  height: 100px;
  background-color: green;
}
</style>
